<template>
  <!-- <div class="amap"> -->
    <div class="amap_box" @click.stop="test2()" v-loading="loading" style="z-index: 99999;">
      <el-amap ref="map" vid="amapDemo" :events="events" :center="center"
        expandZoomRange="true" :zoom="zoom" :plugin="plugins" :pitch="66">
        <!-- <el-amap-marker :position="center" :icon="icon"></el-amap-marker> -->
        <el-amap-marker v-for="(marker,index) in markers" :key="index" :events="marker.events"
          :position="marker.position" :icon="marker.icon"/>
        <el-amap-info-window v-if="window" :position="window.position" :visible="window.visible"
          :content="window.content" :offset="window.offset" :close-when-click-map="true" :is-custom="true">
          <div id="info-window">
            <span class="info-window_title">{{window.consignee}}</span>
            <span class="info-window_title">{{ window.address }}</span>
            <el-button type="primary" class="detail" plain @click="checkDetail(window.id)">订单详情</el-button>
          </div>
        </el-amap-info-window>
      </el-amap>
    </div>
  <!-- </div> -->
</template>

<script>
  import {
    AMapManager
  } from "vue-amap";
  let amapManager = new AMapManager();
  import {
    list
  } from '@/api/order'
  export default {
    data() {
      const self = this
      return {
        data: [{
            position: [121.599197, 31.205379],
            address: '另一个地址'

          },
          {
            position: [121.564254, 31.21135],
            address: '一个地址'

          }
        ],
        events: {
                click(e) {
                  const { lng, lat } = e.lnglat
                  self.lng = lng
                  self.lat = lat
                }
        },
        markers: [],
        windows: [],
        center: [118.139689, 24.482807],
        window: '',
        zoom: 12,
        orderForm:[],
        loading: false,
        plugins: [{
            enableHighAccuracy: true, //是否使用高精度定位，默认:true
            timeout: 100, //超过10秒后停止定位，默认：无穷大
            maximumAge: 0, //定位结果缓存0毫秒，默认：0
            convert: true, //自动偏移坐标，偏移后的坐标为高德坐标，默认：true
            showButton: true, //显示定位按钮，默认：true
            buttonPosition: "LB", //定位按钮停靠位置，默认：'LB'，左下角
            showMarker: true, //定位成功后在定位到的位置显示点标记，默认：true
            showCircle: true, //定位成功后用圆圈表示定位精度范围，默认：true
            panToLocation: false, //定位成功后将定位到的位置作为地图中心点，默认：true
            zoomToAccuracy: false, //定位成功后调整地图视野范围使定位位置及精度范围视野内可见，默认：f
            extensions: "all",
            //地图定位按钮
            pName: "Geolocation",
            init(o) {
                  self.lng = self.center[0]
                  self.lat = self.center[1]
                  self.center = self.center;
                  self.loaded = true;
                  self.$nextTick();
              // o 是高德地图定位插件实例
              // o.getCurrentPosition((status, result) => {
              //   console.log(result);
              //   if (result && result.position) {
              //     // self.lng = result.position.lng;
              //     // self.lat = result.position.lat;
              //     // self.center = [self.lng, self.lat];
              //     self.lng = this.center[0]
              //     self.lat = this.center[1]
              //     self.center = this.center;
              //     self.loaded = true;
              //     self.$nextTick();
              //   }
              // });
            },
            events: {
              init(o) {
                  self.lng = self.center[0]
                  self.lat = self.center[1]
                  self.center = self.center;
                  self.loaded = true;
                  self.$nextTick();
                // o.getCurrentPosition((status, result) => {
                //   if (result && result.position) {
                //   // self.lng = this.center[0]
                //   // self.lat = this.center[1]
                //   // self.center = this.center;
                //     self.lng = result.position.lng
                //     self.lat = result.position.lat
                //     self.center = [self.lng, self.lat]
                //     self.loaded = true
                //     self.$nextTick()
                //   }
                // })
              }
            }
          },
          {
            //地图工具条
            pName: "ToolBar",
            init(o) {},
          },
          {
            //左下角缩略图插件 比例尺
            pName: "Scale",
            init(o) {},
          },
        ],
      }
    },
    created() {
     this.loadOrder()
    },
    methods: {
      loadOrder() {
        var _this = this
        let params = new URLSearchParams()
        params.append('pageNum', 1)
        params.append('pageSize', 300)
        params.append('shippingStatus', 0)
        params.append('orderStatus',1)
        _this.loading = true
        list(params).then(response => {
          _this.orderForm = response.data.data
          let newcenter=[]
          newcenter.push(_this.orderForm[0].lng)
          newcenter.push(_this.orderForm[0].lat)
          this.center=newcenter
          console.log(this.center);
          _this.point()
          _this.loading = false
        }).catch(error => {
          _this.loading = false
          console.log('error!!')
        })
      },
      point() {
        const markers = []
        const windows = []
        const that = this
        this.orderForm.forEach((item, index) => {
          markers.push({
            position: [item.lng,item.lat],
            icon:'https://rzico-weex.oss-cn-hangzhou.aliyuncs.com/images/amapOrder.png', //不设置默认蓝色水滴
            events: {
              mouseover() {
                // 方法：鼠标移动到点标记上，显示相应窗体
                that.windows.forEach(window => {
                  window.visible = false // 关闭窗体
                })
                that.window = that.windows[index]
                that.$nextTick(() => {
                  that.window.visible = true
                })
              }
            }
          })
          windows.push({
            position: [item.lng,item.lat],
            isCustom: true,
            offset: [130, 66], // 窗体偏移
            showShadow: false,
            visible: false, // 初始是否显示
            address: item.address,
            consignee:item.consignee,
            id:item.id
          })
        })
        //  加点
        this.markers = markers
        // 加弹窗
        this.windows = windows

      },
      checkDetail(id) {
        this.$router.push({
          path: '/order/view',
          query: {
            id: id
          }
        })
      },
      cancelClick(){
        console.log('我进来了')
        this.$emit('cancelAmap')
      },
      // 防止子元素触发到父元素事件
      test2(){
        console.log('111')
      }
    }
  }
</script>

<style>
  /* .amap {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background-color: rgba(0, 0, 0, 0.2);
    z-index: 9999;
    display: flex;
    justify-content: center;
    align-items: center;
  } */

  .amap_box {
    width: 100vw;
    height: calc(100vh - 84px);
    background-color: white;
    border-radius: 6px;
    overflow: hidden;

  }

  .marker_item {
    position: absolute;
    top: 0;
    left: -42px;
    width: 100px;
    height: 50px;
    border-radius: 6px;
    background-color: white;
    display: flex;
    justify-content: center;
    align-items: center;
  }

  .amap-demo {
    height: 450px;
  }

  .amap-page-container {
    position: relative;
  }

  #info-window {
    width: 211px;
    height: 146px;
    margin-left: 30px;
    background: rgba(255, 255, 255, 0.9);
    border-radius: 4px;
    position: relative;
    overflow: hidden;
  }
  .detail {
    width: 191px;
    height: 24px;
    color: #fff;
    background-color: #1a73e8;
    position: absolute;
    bottom: 10px;
    left: 10px;
    font-size: 12px;
    /* line-height: 24px; */
    padding: 0;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    cursor: pointer;
  }
  .info-window_title{
    font-size: 14px;
    width: 211px;
    display: block;
    padding-top: 10px;
    padding-left: 10px;
    padding-right: 10px;
  }
</style>
